<template>
	<!-- 规格选择 -->
	<u-popup :show="show" @close="handleClose" @open="handleOpen" :round="10" @touchmove.stop.prevent="" closeable>
		<view class="good_details_popup">
			<view class="good_details_popup_header">
				<image class="good_details_popup_header_img" :src="selectedAttr?.imagesUrl ?? orderInfo?.goodsImages">
				</image>
				<view class="good_details_popup_header_right">
					<view class="good_details_popup_header_right_1 goods_price20">
						<!-- <text>￥</text>{{myFixed(selectedAttr?.price * orderNum, 2)}} -->
						<text>￥</text>{{selectedAttr?.price}}
					</view>
					<view class="good_details_popup_header_right_2" v-if="selectedAttr?.specifications">
						已选：<text>{{selectedAttr?.specifications}}</text>
					</view>
					<view class="good_details_popup_header_right_3">库存：{{selectedAttr?.inventory}}</view>
				</view>
			</view>
			<scroll-view :scroll-top="0" scroll-y="true" class="good_details_popup_scroll">
				<view class="good_details_popup_specifications" v-for="(item,index) in list" :key="item?.id">
					<view class="good_details_popup_specifications_header"><text>{{item?.title}}</text></view>
					<view class="good_details_popup_specifications_tag">
						<text v-for="record in item?.children" :key="record?.id" @click="handleSkuId(record,index)"
							:class="{select:attributeId?.indexOf(record?.id)>=0 && disabledId?.indexOf(record?.id) === -1,disabled:disabledId?.indexOf(record?.id)>=0}">{{record?.title}}</text>
						<!-- <text class="select">价格颜色</text>
						<text class="disabled">价格颜色</text> -->
					</view>
				</view>
				<view class="good_details_popup_specifications_header"><text>数量</text><u-number-box v-model="orderNum"
						integer button-size="24" :max="selectedAttr?.inventory??1"></u-number-box></view>
			</scroll-view>
		</view>
		<view class="good_details_popup_btm safe_area">
			<view class="good_details_popup_btm_view">
				<button @click="handleSubmitOrder" :disabled="list?.length !== attributeId?.length">立即购买</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import { ref, unref } from 'vue';
	import { queryFreightByGoodsIdALocationCode } from '@/config/goodStuff.api';
	import { myFixed } from '@/util/index';

	const show = ref(false);
	const list = ref();//商品属性数据
	const combinationList = ref();//商品属性组合数据
	const attributeId = ref([]);// 二级-商品规格
	const specifications = ref([]);// 二级-商品规格明文
	const disabledId = ref([]);//禁用id
	const selectedAttr = ref();//选择的属性
	const orderNum = ref(1);//订单数量
	const orderInfo = ref();//订单信息

	/**
	 * 打开选择器
	 */
	function handleShow(data) {
		console.log(data, 'data');
		list.value = data.list;
		selectedAttr.value = data.selectedAttr;
		orderNum.value = data.orderNum;
		orderInfo.value = data.orderInfo;
		combinationList.value = data.combinationList;
		// 规格禁用
		// data.combinationList?.map(item => {
		// 	if (item?.inventory === 0 && item?.specificationsIds?.indexOf(attributeId.value[0]) >= 0) {
		// 		disabledId.value?.push(...item?.specificationsIds?.split(','));
		// 	}
		// })

		attributeId.value = [];
		specifications.value = [];
		specifications.value = data.selectedAttr?.specifications?.split(',') ?? [];
		attributeId.value = data.selectedAttr?.specificationsIds?.split(',') ?? [];
		handleOpen();
	}

	/**
	 * 弹出层关闭
	 */
	function handleClose() {
		show.value = false;
	}

	/**
	 * 弹出层打开
	 */
	function handleOpen() {
		show.value = true;
	}

	/**
	 * 立即购买
	 */
	async function handleSubmitOrder() {
		const info = unref(orderInfo);
		if (list.value?.length === attributeId.value?.length && attributeId.value?.indexOf('') === -1) {
			uni.setStorageSync('orderInfo', {
				...unref(orderInfo),
				// freightCharges: res?.freightCharges,//运费金额
				orderNum: unref(orderNum),//数量
				unitPrice: unref(selectedAttr)?.price,//单价
				totalPrice: myFixed(unref(selectedAttr)?.price * unref(orderNum), 2),//商品总价
				attributeId: unref(attributeId)?.join(','),//商品规格id
				specifications: unref(specifications)?.join(','),//商品规格明文
				goodsImages: selectedAttr.value?.imagesUrl ?? unref(orderInfo)?.goodsImages,//商品图片
				inventory: unref(selectedAttr)?.inventory,//库存
			})
			uni.$u.route('/pages/goodStuff/submitOrder');
		} else {
			uni.showToast({
				icon: 'none',
				title: '请选择商品！'
			})
		}
	}

	/**
	 * 商品选择
	 * index:大规格的索引，具体点击的是颜色，还是尺寸
	 * i：小规格的索引，点击的是颜色规格下的黑色，还是白色，
	 * 这里的index和i、用来控制点击项的高亮展示，同时需要id、push进对应索引的 select_id[]
	 */
	function handleSkuId(secondLevelItem : any, index : number) {
		if (disabledId.value?.indexOf(secondLevelItem?.id) === -1) {
			attributeId.value[index] = secondLevelItem?.id;
			specifications.value[index] = secondLevelItem?.title;
			disabledId.value = [];
			combinationList.value?.map(item => {
				// 规格禁用逻辑
				if (item?.inventory === 0 && item?.specificationsIds?.indexOf(attributeId.value[0]) >= 0) {
					disabledId.value?.push(...item?.specificationsIds?.split(','));
				}
				const selectStr = [...attributeId.value]?.join(',');
				if (item?.specificationsIds === selectStr) {
					selectedAttr.value = item;
					// 库存为零 清空赋值id,name
					if (item?.inventory === 0) {
						attributeId.value[index] = '';
						specifications.value[index] = '';
					}
				}
			})
		}
	}

	/**
	 * 查询运费
	 */
	async function queryFreight() {
		// 查询运费
		const res = await queryFreightByGoodsIdALocationCode({ freightTemplateId: parameter.value?.freightTemplateId, locationCode: parameter.value?.locationCode?.split(',')[0] });
	}

	defineExpose({
		handleShow,
		handleClose,
	})
</script>

<style lang="scss" scoped>
	::v-deep .u-popup .u-transition {
		.u-popup__content .u-popup__content__close--hover {
			.u-right {
				.u-icon__icon {
					font-size: 10rpx !important;
				}
			}
		}
	}

	.good_details_popup {
		padding: 28rpx 24rpx;

		.good_details_popup_header {
			display: flex;
			align-items: flex-end;

			.good_details_popup_header_img {
				width: 216rpx;
				height: 216rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}

			.good_details_popup_header_right {
				.good_details_popup_header_right_1 {}

				.good_details_popup_header_right_2 {
					padding: 14rpx 0;
					color: #999999;
					font-size: 28rpx;

					text {
						display: inline-block;
						background-color: #EDEDED;
						padding: 8rpx 14rpx;
						font-size: 28rpx;
						color: #333333;
						margin-top: 10rpx;
						// font-weight: bold;
					}
				}

				.good_details_popup_header_right_3 {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}

		.good_details_popup_scroll {
			height: calc(40vh);
		}

		.good_details_popup_specifications_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding-left: 24rpx;
			padding-top: 24rpx;
			// padding-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: 500;
		}

		.good_details_popup_specifications {

			.good_details_popup_specifications_tag {
				margin-right: -3vw;

				text {
					display: inline-block;
					border-radius: 12rpx;
					border: 4rpx solid #DFDFDF;
					background-color: #F0F0F0;
					padding: 10rpx 32rpx;
					font-size: 28rpx;
					line-height: 48rpx;
					margin: 24rpx 3vw 0 0;
					min-width: calc((100vw - 22.66vw - 48rpx - 24rpx - 70rpx) / 3);
					text-align: center;
					cursor: pointer;

					&.select {
						border-color: #FF3535;
						background-color: #FFDEDE;
						color: #FF3535;
					}

					&.disabled {
						color: #C2C2C2;
					}
				}
			}
		}
	}

	.good_details_popup_btm {
		background-color: #fff;
		box-shadow: 0 -1rpx rgba(0, 0, 0, 0.24);

		.good_details_popup_btm_view {
			padding: 12rpx 24rpx;

			button {
				margin: 0;
				padding: 0;
				border-radius: 776rpx;
				background-color: #FF943C;
				height: 70rpx;
				line-height: 69rpx;
				color: #fff;
				font-size: 30rpx;
				font-weight: 500;

				&[disabled]:not([type]) {
					opacity: 0.5;
				}

				&::after {
					border: 0;
				}
			}
		}
	}
</style>